<template>
  <div>
    <h1>素南的组件</h1>
    <h2>{{ msg1 }}</h2>
    <h3>{{ msg }}</h3>
    <h2>{{ arr }}</h2>
    <button @click="say">change</button>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    msg: {
      type: String,
      // required:true
    },
    arr: {
      type: Array,
    },
  },
  // props: ["msg", "arr"],

  /* 组件之间的父子传值：  props    */
  data() {
    return {
      msg1: "素南很漂亮",
    };
  },
  methods: {
    say() {
      console.log("没问题！！");
      this.msg = "对对对！！";
    },
  },
  beforeCreate() {
    console.log("beforeCreate 子组件");
  },
  created() {
    console.log("created 子组件");
  },
  beforeMount() {
    console.log("beforeMount 子组件");
  },
  mounted() {
    console.log("mounted 子");
  },
  beforeUpdate() {
    console.log("beforeUpdate 子");
  },
  updated() {
    console.log("updated 子");
  },
  beforeDestroy() {
    console.log("beforeDestory 子");
  },
  destroyed() {
    console.log("destroyed 子");
  },
};
</script>
<style scoped>
h1 {
  color: red;
}
</style>